<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请发表对vue的评论</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <Add :addComment="addComment"/>
      <List :comments="comments" :deleteComment="deleteComment"/>
    </div>
  </div>
</template>

<script>
  // 1. 引入组件标签
  import Add from "./components/Add";
  import List from "./components/List";

  export default {
    name: "App",
    // 2. 映射组件标签
    components: {Add, List},
    data() {
      return {
        comments: [ // 数据在那个组件，更新数据的行为（方法）就应该定义在哪个组件
          /*{username: 'BOB', content: 'Vue 还不错'},
          {username: 'Cat', content: 'Vue So Easy'},
          {username: 'Bz', content: 'Vue So So'},*/
        ]
      }
    },
    methods: {
      addComment(comment) {
        // 添加数据
        this.comments.unshift(comment);
      },
      deleteComment(index) {
        // 删除数据
        this.comments.splice(index, 1);
      }
    }
  }
</script>

<style scoped>

</style>
